<script setup>

import {computed, ref} from "vue";

const props = defineProps({
  type: {
    type: Number,
    default: 1
  },
  fileLimit: {
    type: Number,
    default: 1
  }
})
const filePickerRef = ref();
const modalRef = ref();
const tipsText = computed(() => {
  switch (props.type) {
    case 1:
      return '请上传图片'
    case 2:
      return '请上传视频'
    case 3:
      return '请上传文件'
  }
})
const emit = defineEmits(['select'])

const handleSubmit = () => {
  if (filePickerRef.value) {
    emit('select', filePickerRef.value.selectedFiles)
    modalRef.value?.handleClose();
  }
}

const handleOpen = () =>{
  modalRef.value?.handleOpen()
}

defineExpose({
  handleOpen,
  handleSubmit
})
</script>

<template>
  <dialog-form ref="modalRef" :modal-title="`选择${tipsText}`" modal-width="1300px" @submit="handleSubmit">
    <files style="height: 600px" ref="filePickerRef" :select-limit="fileLimit" :type="type" mode="picker"/>
  </dialog-form>
</template>

<style scoped lang="scss">

</style>
